<script  setup>
import {onMounted, ref} from 'vue'
import MenuBtn from '@/components/CommonFooter/MenuBtn.vue'
import {useRoute, useRouter} from 'vue-router'
import {headerBus} from '@/components/CommonFooter/headerBus'
import {sleep} from '@/utils/sleep'
import {childrenRoutes} from "@/router/index.js"
const route = useRoute()
const router = useRouter()
const isActive = (item) => item.name === route.name
const menuList = ref(childrenRoutes)
const routerTo = async (item) => {
  console.log(item.text , route.name)
  if (item.name === route.name) return
  await headerBus.emitBeforeRouteTo()
  await router.push(item.path )
}
const isShowMenu = ref(false)
onMounted(async () => {
  // fetchWeather()
  await sleep(650)
  isShowMenu.value = true
})
</script>

<template>
  <div class="footer">
    <transition name="bounce">
      <div v-if="isShowMenu" class="footer-box">
        <!-- 避免在循环中重复调用 route.name  -->
        <template v-for="item in menuList" :key="item.text">
          <MenuBtn
              :class="[isActive(item) && 'active']"
              :text="item.name"
              @click="routerTo(item)"
          />
        </template>
      </div>
    </transition>
  </div>
</template>

<style scoped lang="scss">
.footer {
  width: 100%;
  height: 124px;
  position: absolute;
  bottom: -50px;
  padding: 0 400px;
  pointer-events: none;
  z-index: var(--common-header-z-index);
  background-image: url("./imgs/footer_bg.png");
  background-repeat: no-repeat;
  background-position: center;
}
.bounce-enter-active {
  animation: bounceInDown 0.8s;
}

.bounce-leave-active {
  animation: bounceOutUp 0.8s;
}

@keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    transform: translate3d(0, 200px, 0) scaleY(3);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, -25px, 0) scaleY(0.9);
  }

  75% {
    transform: translate3d(0, -10px, 0) scaleY(0.95);
  }

  90% {
    transform: translate3d(0, 5px, 0) scaleY(0.985);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}
/* 这里需要补充 bounceOutUp 动画，原代码中未给出 */
@keyframes bounceOutUp {
  0% {
    transform: translate3d(0, 0, 0);
  }
  10% {
    transform: translate3d(0, 5px, 0) scaleY(0.985);
  }
  25% {
    transform: translate3d(0, -10px, 0) scaleY(0.95);
  }
  40% {
    opacity: 1;
    transform: translate3d(0, -25px, 0) scaleY(0.9);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, 200px, 0) scaleY(3);
  }
}

.footer-box {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  font-family: "YouSheBiaoTiHei";
}


</style>
